<!--标准库 列表组件 - modeA 图文列表-->
<template>
  <div class="list-wrap">
    <el-checkbox-group v-model="checkBoxList">
      <div v-for="(item, index) in listData" :key="index" class="list-a">
        <el-checkbox class="list-checkbox" :label="item">{{ }}</el-checkbox>
        <div class="mode-a">
          <div class="title">
            <h4>
              <p class="name">
                <span class="txt" @click="toDetail(item)"
                  >{{ index + 1 }}、<span
                    v-html="item.title"
                  ></span
                ></span>
              </p>
            </h4>
            <!-- 屏蔽本条结果 -->
            <p class="shield">
              <el-tooltip content="屏蔽本条结果" placement="top">
                <img src="@/assets/img/IR/shield.svg" @click="handleShield(item)" />
              </el-tooltip>
            </p>
            <p>
              <!-- 收藏 -->
              <el-tooltip
                :content="!item.isCollection ? '收藏' : '取消收藏'"
                placement="top"
              >
                <a
                  class="collect"
                  :class="{
                    'el-icon-star-on': item.isCollection,
                    'el-icon-star-off': !item.isCollection,
                  }"
                  @click="handleCollect(item, index)"
                ></a>
              </el-tooltip>
            </p>
          </div>
          <div class="list-main">
            <div class="right">
              <ul class="info">
                <li>
                  <span class="tit">标准号：</span
                  ><span class="content" v-html="item.code"></span>
                </li>
                <li>
                  <span class="tit">标准类型:</span
                  ><span class="content" v-html="item.type"></span>
                </li>
                <li>
                  <span class="tit">发布日期：</span
                  ><span class="content" v-html="item.issue_date"></span>
                </li>
                <li>
                  <span class="tit">标准状态：</span
                  ><span class="content" v-html="item.status"></span>
                </li>
                <li style="width: 100%">
                  <span class="tit">起草单位:</span
                  ><span class="content">{{
                    (item.drafting_unit || []).join("、")
                  }}</span>
                </li>
                <li style="width: 100%">
                  <span class="tit">起草人：</span
                  ><span class="content" v-html="item.draftsman"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </el-checkbox-group>
    <!-- no-data -->
    <div v-if="noData" class="no-data">
      <loading1 :emptyText="emptyText" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import {
  disassembleWord,
  wordsLight,
  isZh,
  replaceKeyword,
} from "@/utils/utils.js";
export default {
  components: {},
  props: {
    data: {
      type: Object,
    },
    checkAllVal: {
      type: Boolean,
    },
  },
  data() {
    return {
      listData: [],
      origListData: [], // 原始数据
      checkBoxList: [],
      noData: false,
      cancel: null,
      emptyText: "",
      dataIndex: -1,
    };
  },
  computed: {
    ...mapState([
      "searchWord",
      "highlightKeyWords",
      "highlightModeSettings",
      "defaultTrans",
    ]),
  },
  methods: {
    handleShield(item) {
      this.$Bus.$emit("shield", {
        sq: ` and (not id/${item.id})`,
        sourceType: "STANDARD",
      });
    },
    handleCollect(item, index) {
      // console.log("item", item);
      // return;
      this.dataIndex = index;
      let type = "collect",
        sourceId = item.esId;
      if (item.isCollection) {
        // 取消收藏
        type = "cancle";
        sourceId = item.collectionId;
      }
      this.$Bus.$emit("collect", {
        type: type,
        title: item.title,
        sourceId: sourceId,
        sourceType: "STANDARD",
      });
    },
    getListData(data) {
      let result = data.result || [];
      let list = [];
      let origList = [];
      result.forEach((v, index) => {
        if (v.abstract && v.abstract !== "") {
          let lastStr = v.abstract[v.abstract.length - 1];
          let reg = /[.|。|？]/g;
          if (!reg.test(lastStr)) {
            v.abstract += "...";
          }
        } else {
          v.abstract = "暂无内容";
        }

        let obj = {
          ...v,
          title: v.title || "-", // 标题
          tech_commitees: v.tech_commitees || "-", // 技术归口单位
          scope: v.scope, //领域
          industry_class: v.industry_class, //科技类别
          industry: v.industry, //产业类型
          issue_date: v.issue_date, //发行日期
          tech_scope: v.tech_scope || "", //科技范围
          draftsman: v?.draftsman?.join("、") || "",
          id: v.id,
        };
        origList.push(obj); // 原始数据
      });

      this.origListData = origList;
      list = JSON.parse(JSON.stringify(origList)); // 高亮模式下的数据
      // 高亮模式
      let settings = [];
      let open = this.highlightModeSettings.open;
      // 默认关键词高亮样式
      let defObj = [];
      // if (this.highlightKeyWords.open) {
      //   // 如果是高级检索
      //   defObj = this.highlightKeyWords.modes;
      // } else {
      //   // 如果是智能检索
      //   let wordArr = disassembleWord(this.searchWord);
      //   defObj = wordArr;
      // }

      if (open) {
        // 如果开启高亮模式
        settings = [...defObj, ...this.highlightModeSettings.modes];
      } else {
        settings = [...defObj];
      }

      list.forEach((v) => {
        v.title = wordsLight(v.title, settings);
        v.tech_commitees = wordsLight(v.tech_commitees, settings);
        v.tech_scope = wordsLight(v.tech_scope, settings);
        v.scope = wordsLight(v.scope, settings);
        v.industry_class = wordsLight(v.industry_class, settings);
        v.industry = wordsLight(v.industry, settings);
        v.issue_date = wordsLight(v.issue_date, settings);
        v.tech_scope = wordsLight(v.tech_scope, settings);
        v.draftsman = wordsLight(v.draftsman, settings);
        v.type = wordsLight(v.type, settings);
      });
      this.listData = list;
      this.noData = origList.length <= 0 ? true : false;
    },
    // 跳转详情
    toDetail(item) {
      let detailLeftMenu = [];
      this.origListData.forEach((v) => {
        detailLeftMenu.push({
          id: v.id || "--", //
          title: v.title, // 标题号
        });
      });
      localStorage.setItem("detailLeftMenu", JSON.stringify(detailLeftMenu));
      this.$nextTick(() => {
        let routerUrl = this.$router.resolve({
          name: "DataCenterDetail",
          query: {
            id: item.esId,
            type: "standard",
          },
        });
        window.open(routerUrl.href, "_blank");
      });
    },
  },
  watch: {
    data() {
      this.getListData(this.data);
    },
    // 高亮模式
    highlightModeSettings: {
      deep: true,
      handler: function() {
        this.getListData(this.data);
      },
    },
    // 多选
    checkBoxList() {
      // this.$emit('checkBoxList', this.checkBoxList)
      this.$Bus.$emit("getDcCheckBoxlist", this.checkBoxList);
    },
    // 全选
    checkAllVal() {
      this.checkBoxList = this.checkAllVal ? this.listData : [];
    },
  },
  mounted() {
    if (Object.keys(this.data).length > 0) {
      this.getListData(this.data);
    }
    this.$Bus.$on("emptyText", (data) => {
      this.emptyText = data;
    });
    this.$Bus.$on("isCollect", (data) => {
      if (data.type == "success") {
        this.$set(this.listData[this.dataIndex], "isCollection", true);
        this.$set(this.listData[this.dataIndex], "collectionId", data.collectionId);
      } else {
        this.$set(this.listData[this.dataIndex], "isCollection", false);
      }
    });
    this.replaceKeyword = replaceKeyword;
  },
  beforeDestroy() {
    this.$Bus.$off("emptyText");
    this.$Bus.$off("collect");
    this.$Bus.$off("isCollect");
  },
};
</script>

<style lang="scss" scoped>
.list-wrap {
  position: relative;
  .list-a {
    position: relative;
    display: flex;
    // min-height: 240px;
    padding: 20px 0;
    border-left: 4px solid transparent;
    border-bottom: 1px solid $color2;
    box-sizing: border-box;
    background-color: $color2;
    &:hover {
      border-left-color: $mainColor;
      background-color: $color153;
    }
  }
  .list-checkbox {
    position: relative;
    top: 4px;
    left: 12px;
  }
  .mode-a {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-left: 15px;
    padding-right: 10px;
    // margin-left: 34px;
    box-sizing: border-box;
    .title {
      position: relative;
      width: 100%;
      display: inline-flex;
      align-items: center;
      padding-left: 0;
      border-bottom: 0;
      margin-bottom: 15px;
      h4 {
        display: inline-flex;
        align-items: flex-end;
        width: calc(100% - 40px);
        line-height: 1.5em;
        margin-top: 0;
        margin-bottom: 0;
        .name {
          display: inline-block;
          margin-top: 0;
          margin-bottom: 0;
          // &:hover {
          //   color: $color141;
          // }
          span {
            min-height: 30px;
            line-height: 30px;
            margin-right: 14px;
            font-size: 18px;
            cursor: pointer;
            &.icon {
              display: inline-block;
              width: 24px;
              margin-right: 10px;
              text-align: center;
              font-weight: normal;
              font-size: 16px;
              vertical-align: top;
              color: $mainColor;
              cursor: pointer;
            }
            &.iconzhankai2 {
              font-size: 20px;
            }
            &.iconshoucang11 {
            }
            &.iconshoucang3 {
              color: $mainColor;
            }
          }
        }
      }
      .shield {
        margin-right: 10px;
        cursor: pointer;
      }
      .collect {
        cursor: pointer;
      }
      .el-icon-star-on {
        color: $color120;
        font-size: 0.3rem;
      }
      button {
        padding: 4px 15px;
        border: 1px solid $color37;
        border-radius: 13px;
        color: $color141;
        background-color: transparent;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: $color141;
        }
      }
    }
    .list-main {
      position: relative;
      display: flex;
      width: 100%;
      // min-height: 200px;
      margin-bottom: 15px;
      .head-img,
      .no-img {
        position: relative;
        width: 150px;
        height: 200px;
        border: 1px solid $color2;
        cursor: pointer;
        .head-img-loading {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 200px;
          background-color: $color62;
          .icon {
            display: inline-block;
            width: auto;
            height: auto;
            font-size: 30px;
            color: $color63;
          }
        }
        .no-img {
          border: 1px solid $color2;
          box-sizing: border-box;
          img {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
      .right {
        position: relative;
        flex: 1;
        min-width: 0;
        padding-left: 20px;
        padding-right: 10px;
        .info {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          list-style: none;
          li {
            position: relative;
            display: inline-flex;
            width: 50%;
            line-height: 24px;
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            span {
              display: inline-block;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &.tit {
                width: 95px;
                color: $color6;
              }
              &.content {
                flex: 1;
                color: $color158;
              }
            }
          }
        }
        .abs {
          line-height: 24px;
          margin: 5px 0;
          font-size: 12px;
          color: $color143;
        }
        .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0;
          .left {
            flex: 1;
            span {
              position: relative;
              display: inline-block;
              margin-right: 24px;
              font-size: 12px;
              color: $color6;
              i {
                font-style: normal;
                color: $color1;
              }
            }
          }
          .tag {
            padding: 6px 10px;
            border-radius: 4px;
            margin: 0 5px;
            font-size: 12px;
            color: #fff;
            background-color: $mainColor;
            vertical-align: text-bottom;
          }
        }
      }
    }
  }
}
.tools-box {
  position: absolute;
  top: 0;
  right: 0;
  // width: 176px;
  padding-right: 10px;
  text-align: right;
  > span {
    display: inline-block;
    width: 78px;
    line-height: 26px;
    border: 1px solid $color141;
    border-radius: 30px;
    margin-left: 10px;
    text-align: center;
    font-size: 12px;
    color: $mainColor;
    background-color: transparent !important;
    cursor: pointer;
    &:nth-of-type(1) {
      margin-left: 0;
    }
    &.active {
      border-color: $mainColor;
      color: $color2;
      background-color: $mainColor !important;
    }
    &.assess {
      border-color: $mainColor !important;
      color: $color2;
      background-color: $mainColor !important;
    }
    &.archives {
      &:hover {
        border-color: $mainColor;
        color: $color2;
        background-color: $mainColor !important;
      }
    }
  }
}
.no-data {
  position: relative;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: $color6;
  background-color: $color2;
}
</style>
